<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-10-28 19:44:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-10-28 21:33:32
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
  </head>
  <style>
    .banner {
      background: url(./images/banner_bg_02.jpeg) center center / 6000px
        no-repeat;
    }
    /* 图片列表 */
    .banner .area {
      position: relative;
      height: 285px;
      background-color: yellow;
    }
    .banner .area-left {
      position: relative;
      width: 730px;
    }
    .banner .area-left .img-list {
      display: flex;
      overflow: hidden;
    }
    .banner .area-left .img-list li {
      flex-shrink: 0; /* 1是压缩，0不压缩，同时和父元素宽度保持一致 */
      width: 100%; /* 和父元素保持一致 */
    }
    .banner .area-left .img-list .item {
      display: block;
    }
    .banner .area-left .img-list .item img {
      width: 100%;
      height: 285px; /* 强制去除底部颜色 */
    }
    /* 点列表*/
    .banner .area-left .dots-list {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      /* 这里没有设置宽度，需要使用弹性布局 */
    }
    .banner .area-left .dots-list .item {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(./images/banner_sprite.png) 3px -343px;
    }
    .banner .area-left .dots-list .item.active,
    .banner .area-left .dots-list .item:hover {
      background-position: -16px -343px;
    }

    /* 右侧区域 */
    .banner .area-right {
      position: absolute;
      /* 这里的定位还是看上面的area作用的元素是哪一个，定位到这个元素的最右边 */
      /* 高度auto
      1.设置top/bottom=0,不设置高度
      2.设置高度但是不能紧跟父元素的高度
      3.top=0，height=100%
      */
      width: 254px;
      right: -1px;
      /* 左右盒子加起来984px，但是area是982px ，right=-1左右两边各占一个像素*/
      top: 0;
      bottom: 0;
      background: url(./images/download_sprite.png);
    }
    .banner .area-right .download {
      display: block;
      width: 215px;
      height: 56px;
      margin: 186px 0 0 19px;
      text-indent: -9999px;
    }
    .banner .area-right .download:hover {
      background: url(./images/download_sprite.png) 0 -290px;
    }
    .banner .area-right .desc {
      margin-top: 10px;
      font-size: 12px;
      color: #8d8d8d;
      text-align: center;
    }
  </style>

  <body>
    <div class="banner">
      <div class="area wrapper_03">
        <div class="area-left">
          <ul class="img-list">
            <li>
              <a href="#" class="item"
                ><img src="./images/banner_02.jpeg" alt=""
              /></a>
            </li>
            <li>
              <a href="#" class="item"
                ><img src="./images/banner_02.jpeg" alt=""
              /></a>
            </li>
            <li>
              <a href="#" class="item"
                ><img src="./images/banner_02.jpeg" alt=""
              /></a>
            </li>
          </ul>
          <ul class="dots-list">
            <li><a href="#" class="item active"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
            <li><a href="#" class="item"></a></li>
          </ul>
        </div>
        <div class="area-right">
          <a href="#" class="download">下载客户端</a>
          <p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
      </div>
    </div>
  </body>
</html>
